<template>
  <div class="home-container">
    <div class="single-list">
      <div v-for="(item, index) in items" :key="index" class="list-item">
        <div class="image-wrapper" @click="goToVideoPage(item.id)"> <!-- 添加点击事件 -->
          <img :src="item.src" :alt="item.title" class="list-image">
          <div class="list-content">
            <h2 class="list-title">{{ item.title }}</h2>
            <p class="list-intro">{{ item.intro }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入路由钩子

const router = useRouter();

// 重新定义图片数据，添加 id 字段并修改标题
const images = [
  { id: 1, src: 'https://codelover.club/coursefiles/images/film/爱情.jpeg', title: '泰坦尼克号' },
  { id: 2, src: 'https://codelover.club/coursefiles/images/film/科幻.jpeg', title: '黑客帝国' },
  { id: 3, src: 'https://codelover.club/coursefiles/images/film/美食.jpeg', title: '舌尖上的中国' },
  { id: 4, src: 'https://codelover.club/coursefiles/images/film/动画.jpeg', title: '你的名字' },
];

// 编写简介信息
const items = ref(images.map(item => {
  let intro = '';
  switch (item.title) {
    case '泰坦尼克号':
      intro = '《泰坦尼克号》是一部经典的爱情灾难电影，讲述了穷画家杰克和贵族女露丝抛弃世俗的偏见坠入爱河，最终杰克把生存的机会让给了露丝的感人故事。影片将爱情与灾难完美结合，那惊心动魄的场景令人难以忘怀。';
      break;
    case '黑客帝国':
      intro = '《黑客帝国》构建了一个充满科幻色彩的虚拟世界，主角尼奥发现看似正常的现实世界实际上是由一个名为“矩阵”的计算机人工智能系统控制的。在反抗组织的帮助下，尼奥开始了对抗矩阵的冒险之旅，引发人们对现实与虚拟的深度思考。';
      break;
    case '舌尖上的中国':
      intro = '《舌尖上的中国》是一部美食纪录片，它以美食为窗口，介绍了中国各地的特色美食和与之相关的风土人情、历史文化。通过这部纪录片，观众可以领略到中华美食的博大精深，感受中国人对美食的热爱和对生活的追求。';
      break;
    case '你的名字':
      intro = '《你的名字》是一部温暖而浪漫的动画电影，讲述了住在东京的少年立花泷和深山乡村女高中生宫水三叶因为某个契机灵魂互换的奇妙故事。在寻找彼此的过程中，他们逐渐揭开了隐藏在互换背后的神秘真相，谱写了一段跨越时空的动人恋曲。';
      break;
  }
  return {
    ...item,
    intro
  };
}));

// 定义跳转方法
const goToVideoPage = (id: number) => {
  router.push({ name: 'VideoPlayer', params: { id } });
};
</script>

<style scoped>
.home-container {
  padding-top: 80px; /* 根据导航栏的实际高度调整 */
}

.single-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.list-item {
  position: relative;
}

.image-wrapper {
  position: relative;
}

.list-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.list-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  width: 80%; /* 限制内容宽度 */
}

.list-title {
  margin-top: 0;
  margin-bottom: 10px;
}

.list-intro {
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制显示的行数 */
  max-height: 3.6em; /* 根据字体大小调整最大高度 */
  line-height: 1.2em;
}
</style>